<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div class="box">
      <div class="d1">内部盒子</div>
    </div>
    <ul>
      <li>1</li>
      <li class="li2">2</li>
      <li>3</li>
      <li>4</li>
    </ul>

    <script>
      //父子关系
      var d1 = document.querySelector(".d1");
      var box = d1.parentNode; // parentNode 属性 可以获取到 元素的 父元素 dom对象
      console.log(box);

      var ul = document.querySelector("ul");
      console.log(ul.children); // 获取ul 的所有 标签子节点 (常用)
      console.log(ul.childNodes); // 获取ul 的所有子节点(包括换行符节点和注释节点)

      //兄弟关系
      var li2 = document.querySelector(".li2");
      console.log(li2);

      // 下一个兄弟标签元素 nextElementSibiling
      var next = li2.nextElementSibling;
      console.log("下一个兄弟标签", next);
      console.log(li2.nextSibling); // 不带element (都会计算换行符和注释节点) 获取下一个兄弟节点(换行符 注释也计算在内)

      // 获取下一个兄弟元素节点 (兼容写法)
      var result = li2.nextElementSibling || li2.nextSibling;

      // previousElementSibiling 获取上一个 兄弟标签元素/*  */
      console.log("上一个兄弟标签", li2.previousElementSibling);

      // 获取单个 子节点
      // el dom对象
      // 第一个子节点
      el.firstElementChild || el.firstChild;
      //第二个子节点
      el.lastElementChild || el.lastChild;
    </script>
  </body>
</html>
